<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入Bootstrap CSS文件 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <!-- 引入Bootstrap JS文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <style>
    body {
      background-image: url("../img/logo_bg.jpg"); /* 替换为你的图片链接或者文件路径 */
      background-repeat: repeat; /* 禁止图片重复 */
      background-size: cover; /* 调整图片大小以覆盖整个背景 */
    }
    /* 遮罩层样式 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      display: none; /* 默认隐藏 */
    }
    /* 弹窗样式 */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: none; /* 默认隐藏 */
    }
    .popup2 {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: none; /* 默认隐藏 */
    }
    label {
      width: 100px;
      margin-bottom: 10px;
    }

    input[type="text"], select {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      color: #555;
    }

    select option {
      color: #555;
    }
    button {
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      background-color: #007bff;
      color: #fff;
      cursor: pointer;
    }
    button:hover {
      background-color: #0069d9;
    }
    /* 让表格显示单双行效果 */
    tbody tr:nth-child(even):hover {
      background-color: #ffffcc;
    }

    tbody tr:nth-child(odd):hover {
      background-color: #ddd;
    }

    /* 让整个页面居中显示 */
    body {
      display: block;
      margin: 0 auto;
      height: 100vh;
    }


    /* 调整表格样式 */
    table {
      border-collapse: collapse;
      width: 80%;
      max-width: 800px;
    }

    th, td {
      text-align: left;
      padding: 8px;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="content">
<h1>学生信息管理系统</h1>
<form action="/student/byConditions" method="post">
  <label for="student_id">学号</label>
  <input type="text"  name="student_id" id="student_id">
  <label for="chinese_name">中文名</label>
  <input type="text"  name="chinese_name" id="chinese_name">
  <label for="stu_class">班级</label>
  <input type="text"  name="stu_class" id="stu_class">
  <button type="submit">查询</button>
  <button type="button" onclick="addStudent()">添加</button>
</form>
<table>
  <thead>
  <tr>
    <th>学号</th>
    <th>中文名</th>
    <th>英文名</th>
    <th>电话</th>
    <th>班级</th>
    <th>学期</th>
    <th>期中成绩</th>
    <th>期末成绩</th>
    <th>学籍状态</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="student : ${students}">
    <td th:text="${student.student_id}">ID</td>
    <td th:text="${student.chinese_name}">中文名</td>
    <td th:text="${student.english_name}">英文名</td>
    <td th:text="${student.tel}">电话</td>
    <td th:text="${student.stu_class}">班级</td>
    <td th:text="${student.semester}">学期</td>
    <td th:text="${student.mid_marks}">期中成绩</td>
    <td th:text="${student.end_marks}">期末成绩</td>
    <td th:text="${student.stu_status}">学籍状态</td>
    <td>
      <button th:attr="onclick='editStudent(\''+${student.student_id}+'\',\''+${student.chinese_name}+'\',\''+${student.english_name}+'\',\''+${student.tel}+'\',\''+${student.stu_class}+'\',\''+${student.semester}+'\',\''+${student.mid_marks}+'\',\''+${student.end_marks}+'\',\''+${student.stu_status}+'\')'">编辑</button>
    </td>
  </tr>
  </tbody>
</table>
<div class="overlay" id="overlay"></div>
<div class="popup2" id="popup2">
  <form action="/admin/addonestu" method="post" id="myform2">
    <label for="add_student_id">学号：</label>
    <input type="text" id="add_student_id" name="student_id" required><br>
    <label for="add_chinese_name">中文名：</label>
    <input type="text" id="add_chinese_name" name="chinese_name" required><br>
    <label for="add_english_name">英文名：</label>
    <input type="text" id="add_english_name" name="english_name" required><br>
    <label for="add_tel">手机号码：</label>
    <input type="text" id="add_tel" name="tel" required><br>
    <label for="add_stu_class">班级：</label>
    <input type="text" id="add_stu_class" name="stu_class" required><br>
    <label for="add_semester">学期：</label>
    <select id="add_semester" name="semester">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
    </select><br>
    <label for="add_mid_marks">期中成绩：</label>
    <input type="text" id="add_mid_marks" name="mid_marks" required><br>
    <label for="add_end_marks">期末成绩：</label>
    <input type="text" id="add_end_marks" name="end_marks" required><br>
    <select id="add_stu_status" name="stu_status">
      <option value="A">在籍</option>
      <option value="L">离校</option>
    </select>
    <button type="submit">添加</button>
    <button type="button" onclick="closebtn()">关闭</button>
  </form>
</div>
<div class="popup" id="popup">
  <form action="/admin/editstu" method="post" id="myform">
    <label for="edit_student_id">学号</label>
    <input type="text" id="edit_student_id" name="student_id" readonly><br>
    <label for="edit_chinese_name">中文名：</label>
    <input type="text" id="edit_chinese_name" name="chinese_name"  required><br>
    <label for="edit_english_name">英文名：</label>
    <input type="text" id="edit_english_name" name="english_name"  required><br>
    <label for="edit_tel">手机号码：</label>
    <input type="text" id="edit_tel" name="tel"><br>
    <label for="edit_stu_class">班级：</label>
    <input type="text" id="edit_stu_class" name="stu_class" required><br>
    <label for="edit_semester">学期：</label>
    <select id="edit_semester" name="semester">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
    </select><br>
    <label for="edit_mid_marks">期中成绩：</label>
    <input type="text" id="edit_mid_marks" name="mid_marks" required><br>
    <label for="edit_end_marks">期末成绩：</label>
    <input type="text" id="edit_end_marks" name="end_marks" required><br>
    <select id="edit_stu_status" name="stu_status">
      <option value="A">在籍</option>
      <option value="L">离校</option>
    </select>
    <button type="submit">保存</button>
    <button onclick="closebtn()" type="button">关闭</button>
    <button type="button" onclick="deleteStudent()">删除</button>
  </form>
</div>
<button onclick="goBack()">返回</button>
<button onclick=location.href="/page/mainmenu">首页</button>

  </div>
</div>
<script>
  function goBack() {
    window.history.back();
  }
  function addStudent() {
    document.getElementById("popup2").style.display='block';
    document.getElementById("overlay").style.display='block';
  }
  function deleteStudent()
  {
    if (confirm("确定要删除吗？")) {
      document.getElementById("myform").action = "/admin/editstu";
      document.getElementById("edit_stu_status").value="L";
      document.getElementById("myform").submit();
    }
  }
  function editStudent(student_id, chinese_name, english_name, tel, stu_class, semester, mid_marks, end_marks, stu_status) {
    document.getElementById("popup").style.display='block';
    document.getElementById("overlay").style.display='block';
    document.getElementById("edit_student_id").value=student_id;
    document.getElementById("edit_chinese_name").value=chinese_name;
    document.getElementById("edit_english_name").value=english_name;
    document.getElementById("edit_tel").value=tel;
    document.getElementById("edit_stu_class").value=stu_class;
    document.getElementById("edit_semester").value=semester;
    document.getElementById("edit_mid_marks").value=mid_marks;
    document.getElementById("edit_end_marks").value=end_marks;
    document.getElementById("edit_stu_status").value=stu_status;
  }
  function closebtn() {
    document.getElementById("popup").style.display='none';
    document.getElementById("popup2").style.display='none';
    document.getElementById("overlay").style.display='none';
  }
</script>
</body>
</html>